/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="crumb-top">
      <el-breadcrumb
        style="font-size: 12px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
        <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
        <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="margin-top: 8px">新增二级商协议</div>
    </div>
    <!-- 页面内容 -->
    <div style="padding: 0 20px">
      <!-- 协议主体 -->
      <div>
        <div class="divider-with-text">
          <div class="text">
            <i class="el-icon-info"></i>
            <span style="font-weight: 600; font-size: 14px">协议主体</span>
          </div>
        </div>
        <el-card style="padding: 0px 60px 0 0" class="box-card">
          <el-form ref="protocolMainform" :model="protocolMainform">
            <el-row :gutter="20">
              <el-col style="height: 40px" :span="12">
                <el-form-item label="协议客户:" required>
                  <el-button style="width: 100px" size="mini"
                    >选择客户</el-button
                  >
                  <span
                    style="font-size: 12px; color: #555; margin-left: 6px"
                    >{{ protocolMainform.customerName }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col style="height: 40px" :span="12">
                <el-form-item label="协议状态:">
                  <el-select
                    v-model="protocolMainform.protocolStatus"
                    size="mini"
                    style="width: 200px"
                  >
                    <el-option label="正常" value="normal"></el-option>
                    <el-option label="异常" value="abnormal"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col style="height: 40px" :span="12">
                <el-form-item label="购进指标:">
                  <div class="form-item-input">
                    <el-select
                      v-model="protocolMainform.purIndicators"
                      size="mini"
                      style="width: 100px"
                    >
                      <el-option label="金额" value="money"></el-option>
                      <el-option label="数量" value="number"></el-option>
                    </el-select>
                    <el-input
                      v-model="protocolMainform.purIndicatorsAmount"
                      placeholder="输入金额/数量"
                      style="margin-left: 10px; width: 260px"
                      size="mini"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col style="height: 40px" :span="12">
                <el-form-item label="纯销指标:">
                  <div class="form-item-input">
                    <el-select
                      v-model="protocolMainform.purIndicators"
                      size="mini"
                      style="width: 100px"
                    >
                      <el-option label="金额" value="money"></el-option>
                      <el-option label="数量" value="number"></el-option>
                    </el-select>
                    <el-input
                      v-model="protocolMainform.purIndicatorsAmount"
                      placeholder="输入金额/数量"
                      style="margin-left: 10px; width: 260px"
                      size="mini"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col style="height: 40px" :span="12">
                <el-form-item label="销售区域:">
                  <div class="form-item-input" style="padding-top: 4px">
                    <el-button style="width: 100px" size="mini"
                      >选择区域</el-button
                    >
                    <div
                      class="sales-area-text"
                      v-if="protocolMainform.salesArea ? true : false"
                    >
                      <span style="padding-right: 10px">{{
                        protocolMainform.salesArea
                      }}</span>
                      <i class="el-icon-close" @click="clearArea()"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col style="height: 40px" :span="12">
                <el-form-item label="签订时间:">
                  <el-date-picker
                    v-model="protocolMainform.signTime"
                    type="datetime"
                    placeholder="选择日期"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
              <el-col style="height: 40px" :span="12">
                <el-form-item label="购进渠道:">
                  <div class="form-item-input">
                    <el-select
                      v-model="protocolMainform.selectPurChannels"
                      size="mini"
                      style="width: 100px"
                    >
                      <el-option label="指定渠道" value="specify"></el-option>
                      <el-option
                        label="非指定渠道"
                        value="noSpecify"
                      ></el-option>
                    </el-select>
                    <el-button style="margin-left: 10px" size="mini"
                      >请选择渠道</el-button
                    >
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 购进渠道 -->
          <el-table
            :data="
              tableData.filter(
                (data) =>
                  !search ||
                  data.name.toLowerCase().includes(search.toLowerCase())
              )
            "
            :header-cell-style="{ background: '#eee', color: '#555' }"
            style="margin-left: 60px"
          >
            <el-table-column label="指定渠道编码" prop="code" />
            <el-table-column label="指定渠道名称" prop="name" />
            <el-table-column label="所在省" prop="address" />
          </el-table>
        </el-card>
      </div>
      <!-- 产品政策 -->
      <div>
        <div class="divider-with-text">
          <div class="text">
            <i class="el-icon-info"></i>
            <span style="font-weight: 600; font-size: 14px">产品政策</span>
          </div>
        </div>
        <div class="product-top">
          <el-button type="primary" size="small">添加产品</el-button>
          <div class="product-top-block">
            <span class="product-top-text">购进总指标（万元）:</span>
            <span class="product-top-num">￥152.65</span>
          </div>
          <div class="product-top-block">
            <span class="product-top-text">指标按季度分解（万元）:</span>
            <span class="product-top-num"
              >【Q1】￥12.5，【Q1】￥12.5，【Q1】￥12.5</span
            >
          </div>
          <div class="product-top-block">
            <span class="product-top-text">纯销总指标（万元）:</span>
            <span class="product-top-num">￥152.65</span>
          </div>
        </div>
        <el-card class="box-card">
          <div style="height: 50px; border-bottom: 1px solid #e4e4e4">
            <el-form ref="protocolMainform" :model="protocolMainform">
              <el-row style="padding-left: 30px" :gutter="20">
                <el-col :span="6">
                  <el-form-item label="产品:">
                    <div class="form-item-input">
                      <el-button style="width: 100px" size="mini"
                        >选择产品</el-button
                      >
                      <span
                        style="
                          font-size: 12px;
                          color: #5b97fe;
                          margin-left: 6px;
                        "
                        >{{ protocolMainform.customerName }}</span
                      >
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="协议效期:">
                    <el-date-picker
                      style="width: 300px"
                      v-model="protocolMainform.signTime"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right"
                      size="mini"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col style="text-align: right" :span="4">
                  <el-button type="warning" size="mini" plain>删除</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div style="margin-bottom: 10px">
            <el-table
              :header-cell-style="{
                background: '#eee',
                color: '#555',
              }"
              :border="true"
              :data="proPolicyTableA"
              style="width: 100%"
            >
              <el-table-column label="协议价（元）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="票折（元）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="购进指标量（大单位）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="购进指标量（小单位）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="购进金额（万元）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="纯销指标量（万元）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="纯销指标金额（万元）">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <el-table
              :header-cell-style="{ background: '#eee', color: '#555' }"
              :border="true"
              :data="proPolicyTableB"
              style="width: 100%"
            >
              <el-table-column label="分销奖励">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="费用科目">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="零售配送">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="费用科目">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="医疗配送商">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="费用科目">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="自定义7">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="自定义7">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="input"
                    placeholder="请输入"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <!-- 补充协议 -->
      <div>
        <div class="divider-with-text">
          <div class="text">
            <i class="el-icon-info"></i>
            <span style="font-weight: 600; font-size: 14px">补充协议</span>
          </div>
        </div>
        <el-card class="box-card">
          <div style="text-align: right">
            <el-button
              size="small"
              type="primary"
              @click="addTab(editableTabsValue)"
            >
              新增
            </el-button>
          </div>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <div style="padding-bottom: 30px">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                  "
                >
                  <div style="font-size: 12px">协议内容:</div>
                  <el-button type="warning" size="mini" plain>删除</el-button>
                </div>
                <el-input
                  :rows="5"
                  resize="none"
                  type="textarea"
                  v-model="textarea"
                >
                </el-input>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editableTabsValue: "1",
      editableTabs: [
        {
          title: "补充协议1",
          name: "1",
          content: "补充协议1",
        },
        {
          title: "补充协议2",
          name: "2",
          content: "补充协议2",
        },
        {
          title: "补充协议3",
          name: "3",
          content: "补充协议3",
        },
      ],
      tabIndex: 3,
      tableData: [
        {
          code: "BJ000090",
          name: "宁波九州通药业有限公司",
          address: "浙江省",
        },
        {
          code: "BJ000192",
          name: "国药控股精华有限公司",
          address: "浙江省",
        },
        {
          code: "BJ000283",
          name: "老百姓药业有限公司",
          address: "浙江省",
        },
      ],
      protocolMainform: {
        customerName: "上海正也医药有限公司",
        protocolStatus: "normal",
        purIndicators: "money",
        purIndicatorsAmount: "",
        salesArea: "全国",
        signTime: new Date(),
        selectPurChannels: "specify",
        purChannels: "",
      },
      proPolicyTableA: [{}],
      proPolicyTableB: [{}],
    };
  },

  /**
   * 创建完毕
   */
  created() {},

  methods: {
    clearArea() {
      this.$data.protocolMainform.salesArea = "";
      console.log(this.$data.protocolMainform);
    },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "补充协议" + newTabName,
        name: newTabName,
        content: "补充协议" + newTabName,
      });
      this.editableTabsValue = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
el-col {
  display: flex;
}
.sales-area-text {
  margin-left: 10px;
  font-size: 14px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  width: 70px;
  border: 1px solid #7ca9ff;
  background-color: #f2f8f8;
  color: #7ca9ff;
  border-radius: 6px;
}
.userRole {
  width: 100%;
}
.crumb-top {
  padding: 10px 20px;
  background-color: #fff;
}
.divider-with-text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 40px;
  overflow: hidden; /* 防止线条超出文本区域 */
  text-align: center;
}

.divider-with-text::before,
.divider-with-text::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 60px); /* 计算线条长度，确保两边各有至少20px空白 */
  height: 1px;
  background-image: linear-gradient(
    to right,
    #ccc 0%,
    #ccc 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 8px 1px; /* 虚线间隔 */
  background-repeat: repeat-x;
}

.divider-with-text::before {
  left: 0;
}

.divider-with-text::after {
  right: 0;
}

.form-item-input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.product-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
}
.product-top-block {
  margin-left: 40px;
}
.product-top-text {
  font-size: 12px;
}
.product-top-num {
  font-size: 14px;
  font-weight: 600;
}
</style>

 
 